<template>
  <q-page>
    <webview
      ref="webview"
      :src="data.src"
      :partition="`persist:zbj_${data.userid}`"
      class="full-width full-height absolute-top-left"
      style="vertical-align: top"
      allowpopups
    >
    </webview>
  </q-page>
</template>

<script>
import {
  computed,
  defineComponent,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  ref,
} from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  name: "PagesBrowserPageVue",
  setup() {
    /** @type {{value:Document}} */
    const webview = ref(null);
    const $route = useRoute();
    const data = reactive({
      src: computed(
        () => "https://task.zbj.com/speed/demand-seller/" + $route.params.id
      ),
      userid: $route.query.userid,
    });

    const css = window.electron.utils.readPublicFile(
      "electron/into/demand.css"
    );
    const js = window.electron.utils.readPublicFile("electron/into/demand.js");

    onMounted(() => {
      webview.value.addEventListener("dom-ready", () => {
        webview.value.insertCSS(css);
        webview.value.executeJavaScript(js);
        // webview.value.openDevTools();
      });
    });

    // function listenerSearchHref(url) {
    //   if (!/^[^/]+:\/\//.test(url)) {
    //     url = "http://" + url;
    //   }
    //   data.src = url;
    // }
    // function listenerToggleAccount(acc) {
    //   data.userid = acc.userid;
    // }

    // onMounted(() => {
    //   const webview = document.getElementById("webview");
    //   bus.emit("loadWebview", webview);
    // });

    // bus.on("search-href", listenerSearchHref);
    // bus.on("toggleAccountTab", listenerToggleAccount);

    // onUnmounted(() => {
    //   bus.off("search-href", listenerSearchHref);
    //   bus.off("toggleAccountTab", listenerToggleAccount);
    // });
    return { data, webview };
  },
});
</script>
